<template>
  <div class="life">
    <!-- 头部轮播 -->
     <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(list,index) in lifeImg" :key="index">
          <img  :src='list.picUrl' style="height:187px;width:100%"  />
        </van-swipe-item>
        
      </van-swipe>
    <!-- 下面各项 -->
    <div class="body" v-for="(cate,index1) in nar" :key="cate.id">
      <!-- 主标题 -->
        <div class="body_header">
          <span>{{cate.category.name}}</span>
          <span>{{cate.category.frontName}}</span>
        </div>
        <!-- 总盒子 -->
        <div class="box_big">
          <!-- 每一项盒子 -->
          <div class="box_small" v-for="(c1,index) in cate.itemList" :key="c1.id">
            <van-image
              width="173"
              height="173"
              :src="c1.listPicUrl">
                <template v-slot:loading>
                  <van-loading size="24px">加载中...</van-loading>
                </template>
              </van-image>


              
            <!-- <img class="box_smallImg" :src="c1.listPicUrl" alt=""> -->
            <div class='box_textsm'>
              <div class="box_one">{{c1.name}}</div>
              <div class="box_two">
                <span>￥</span>
                <span>{{c1.sortOriginPrice}}</span>
                <span><s>￥{{c1.sortOriginPrice}}</s></span>
              </div>
              <div class="box_three">
                <div>特价</div>
                <div>仅剩2天</div>
              </div>
            </div>
          </div>
        </div>
    </div>

  </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

// 注册时可以配置额外的选项
Vue.use(Lazyload, {
  lazyComponent: true,
});

export default {
  name: 'life',
  data(){
    return{
      categoryL2List:[]
    }
  },
  props:["navList"],
  
  computed:{
    nar(){
      return (((this.navList ||[]).data || {}).categoryItemList) || []
    },
    lifeImg(){
      return ((((this.navList || []).data || {}).currentCategory || []).bannerList) || []
    },
    
  },
  methods:{
    
  },
  mounted(){
    console.log(this.$route.query)
  }
}
</script>

<style lang="less" scoped >
  .life{
    background-color: #eeeeee;
    .van-swipe__indicator{
        width: 20px;
        height: 2px;
        border-radius:0;
        color:#fff
      }
    .body{
      margin-top: 10px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      .body_header{
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        height: 60px;
        span{
          text-align: center;
        }
        span:nth-child(1){
          font-size: 16px;
        }
        span:nth-child(2){
          font-size: 12px;
          color: #999999;
        }
      }
      .box_big{
        padding: 0 10px;
        display: flex;
        flex-wrap: wrap;
        flex-shrink: 0;
        justify-content: space-between;
        .box_small{
          width: 173px;
          height: 260px;
          display: flex;
          flex-direction: column;
          .box_smallImg{
            
            width: 173px;
            height: 173px;
          }
          .box_textsm{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-content: center;
            
            .box_one{
             height: 19.2px;
              margin-top:10px;
              font-size: 14px;
              flex-wrap: nowrap;
              overflow: hidden;

            }
            .box_two{
              span:nth-child(1){
                color: red;
                font-size: 10px;

              }
              span:nth-child(2){
                color: red;
                font-weight: bold;
                
              }
              span:nth-child(3){
                color: #999999;
                font-size: 10px;
                
              }
            }
          }
          .box_three{
            display: flex;
            background-color: #ffe9eb;
            border-radius: 10px;
            div:nth-child(1){
              background-color: red;
              color: #fff;
              border-radius: 10px;
              font-size: 14px;
              padding:0 5px;
            }
            div:nth-child(2){
              color: red;
              padding-left: 10px;
              font-size:12px
              
            }
          }
        }
      }
    }
  }
  
</style>
